﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>

<div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <!-- 内容：关键字搜索 -->
    <!-- 类解释：navbar-form【导航栏中的表单】 -->
    <div class="navbar-form searchdiv">
        <form action="">
            <!-- 类解释：input-group【输入组】 -->
            <div class="input-group">
                <!-- 类解释：form-control【表单控件】，自定义类search -->
                <input type="text" v-model="keyword" class="form-control search" placeholder="搜索关键字"/>
                <!-- 类解释：输入组文本，背景颜色蓝色 -->
                <a class="input-group-text bg-primary" href="javascript:;" @click="getTableData">
                    <i class="bi bi-search"></i>
                </a>
            </div>
        </form>
    </div>

    <!--
        主体内容
        container：设置版心为两端留白
        style="margin-top: 80px;"：设置版心上外边距为60px
    -->
    <main class="container" style="margin-top: 70px;">
        <!-- row：将整个版心设置为一行，开启网格系统 -->
        <div class="row">
            <!-- col-md-8：设置主题内容左半部分为8格
                col-xs-12：设置主体内容在xs尺寸下占12格
            -->
            <div class="col-md-8 col-xs-12">
                <!-- 卡片一
                        card：开启卡片
                        mt-3：每个卡片距离上外边距为rem:3
                -->
                <div class="card mt-3" v-for="a in tableDatas">
                    <div class="card-body d-flex">
                        <a :href="'blog-detail.html?'+a.id">
                            <img :src="a.articlePic" class="card-img-top card-cover img-fluid" alt="...">
                        </a>
                        <div class="ms-3">
                            <a :href="'blog-detail.html?'+a.id"
                               class="card-link text-decoration-none text-primary">
                                <h5>{{ a.articleName }}</h5>
                            </a>
                            <p style="font-family: Georgia" class="card-text opacity-50">
                                &bull; {{ a.createTime }}
                            </p>
                            <p class="card-text">{{ a.articleRemark }}</p>
                        </div>
                    </div>
                    <hr class="mx-4 my-0">
                    <div class="d-flex justify-content-between align-items-center px-4" style="height: 60px;">
                        <div>
                            <i class="bi bi-folder2-open opacity-50"></i>
                            <span class="card-text">{{ a.tbarticleType.typeName }}</span>
                            <i class="bi bi-tags opacity-50"></i>
                            <span class="card-text">{{ a.articleTag }}</span>
                        </div>
                        <a :href="'blog-detail.html?'+a.id"
                           class="card-link btn btn-primary read">阅读全文</a>
                    </div>
                </div>

                <!--
                    分页部分
                    text-end：设置分页位置靠右
                    overflow-auto：溢出自适应，屏幕缩小后分页栏有水平滚动条
                -->
                <div class="text-end my-3 overflow-auto" style="margin-bottom: 50px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[3, 5, 10]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   background
                                   :total="totals">
                    </el-pagination>
                </div>
            </div>

            <!-- 侧边栏
                sidebar：用于使用jQuery引入侧边栏组件
                col-md-4：此侧边栏站整个网格的4份
                mb-5：侧边栏距离下面5rem
                d-none d-sm-block：在xs尺寸下隐藏，适用于手机
            -->
            <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                <my-sidebar></my-sidebar>
            </div>
        </div>
    </main>
</div>


<script>
    /* 必须要挂载分页栏才会起作用 */
    new Vue({
        el: "#app",
        data: {
            //1.分页查询相关数据
            totals: 0,//总记录条数
            currentPage: 1,//当前页,要传递到后台的
            pageSize: 3, //每页显示多少条

            keyword: '',

            tableDatas: [], //当前页数据
        },
        methods: {
            // @click="updatePageView(a.id)"
            // updatePageView(id) {
            //     alert(id)
            //     // //浏览当前网页。浏览量添加+1
            //     this.$http.get("/article/pageView/" + id).then(res => {
            //     })
            // },
            getTableData() {
                //显示加载圈
                var params = {
                    "currentPage": this.currentPage,
                    "pageSize": this.pageSize,
                    'keyword': this.keyword,
                    "articleState": 1 //前台系统只查询发布的文章
                }
                this.$http.post("/article", params).then(res => {
                    //res.data是axios获取数据的固定格式。list和total是后端响应的数据-PageInfo中
                    this.tableDatas = res.data.list;
                    this.totals = res.data.total;
                })
            },
            //1.2.选择第几页时触发
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;//1 - 2
                this.getTableData();
            },
            //1.3.选择每页显示记录条数时触发
            handleSizeChange(pageSize) {
                this.pageSize = pageSize; //5 - 10
                this.getTableData();
            },

        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue'),
            'my-sidebar': httpVueLoader('./common/sidebar.vue')
        },
        mounted() {
            this.getTableData();
        },
    })
</script>
</body>

</html>